<template>
  <div class="scrollWrap" ref="scrollWrap">
    <div class="scrollContent">
      <div class="banner">
        <Sliders :loop="true"></Sliders>
      </div>
      <div class="songsList">
        <h2>热门歌单推荐</h2>
        <ul>
          <li class="song" v-for="song in songsList">
            <div class="icon">
              <img v-lazy="song.imgurl" alt="">
            </div>
            <div class="text">
              <h3 class="name" v-html="song.creator.name"></h3>
              <div class="desc" v-html="song.dissname"></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!--<div class="loading" v-show="!songsList.length">-->
    <!--<img src="../../common/images/logo.png" alt="">-->
    <!--</div>-->
    <div class="loading" v-show="!songsList.length">
      <Loading :loadingObj="loadingObj"></Loading>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getSongsLists} from 'api/recommend';
  import Sliders from 'base/sliders/sliders';
  import Loading from 'base/loading/loading';
  import BScroll from 'better-scroll';
  export default {
    data () {
      return {
        songsList: [],
        loadingObj: {
          loadingImg: require('../../common/images/logo.png'),
          title: '正在加载...'
        }
      };
    },
    mounted () {
      this._getSongsLists();
      setTimeout(() => {
        this.scroll.refresh();
      }, 2000);
      setTimeout(() => {
        this._initScroll();
      }, 200);
    },
    components: {
      Sliders,
      Loading
    },
    methods: {
      _getSongsLists () {
        getSongsLists().then((res) => {
          this.songsList = res.data.list;
        });
      },
      _initScroll () {
        this.scroll = new BScroll(this.$refs.scrollWrap, {
          scrollX: false,
          scrollY: true
        });
      }
    }
  };
</script>
<style lang='scss'>
  @import "../../common/scss/variable";
  .scrollWrap {
    position: fixed;
    top:80px;
    bottom: 0;
    z-index: -1;
    .scrollContent {
      .songsList {
        h2 {
          height: 65px;
          line-height: 65px;
          text-align: center;
          font-size: $font-size-medium;
          color: $color-theme;
        }
        .song {
          display: flex;
          align-items: center;
          padding: 0 20px 20px 20px;
          .icon {
            width: 60px;
            height: 60px;
            padding-right: 20px;
            flex: 0 0 60px;
            img {
              width: 100%;
            }
          }
          .text {
            display: flex;
            flex-direction: column;

            flex: 1;
            line-height: 20px;
            font-size: $font-size-medium;
            overflow: hidden;
            h3 {
              margin-bottom: 10px;
              color: $color-text;
            }
            .desc {
              color: $color-text-d;
            }
          }
        }
      }
    }
  }
  .loading {
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
  }

</style>
